<template>
  <div>
    <el-header>
         <el-row>

         <el-col :span="1">
         <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
         </el-col>
         <el-col :span="23">

      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/Home">首页</el-menu-item>
        <el-menu-item index="/goods">商品</el-menu-item>
        <el-menu-item index="/order">订单</el-menu-item>
        <el-menu-item index="/vip">会员</el-menu-item>
        <el-menu-item index="/set">设置</el-menu-item>
        <el-menu-item index="/login">登录</el-menu-item>
      </el-menu>
       </el-col>
      </el-row>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "myhead",
  data() {
    return {
      activeIndex: "/Home",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    },
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
/deep/ {
    .el-col-1 {
        text-align: center;
    height: 60px;
    width: 4.16667%;
    background-color: dimgrey;
}
}
</style>
